<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>

			#box {
				width: 200px;
				height: 200px;
				background: red;
				border: 2px solid black;
			}

			#box::after {
				content: "你好";
				font-size: 50px;
				color: blue;
			}

			#box:hover {
				background-color: yellow;
			}

		</style>
	</head>
	<body>
		<div id="box" style="width: 300px;"></div>
	</body>
</html>
<script>
	
	var boxDiv = document.getElementById('box');

	// style是获取行内样式, 如果没有设置行内样式, 将获取不到值 
	// console.log(boxDiv.style);
	// console.log(boxDiv.style.width);

	// 设置行内样式
	boxDiv.style.height = "400px";
	console.log(boxDiv.style.height);


	// 获取全局样式
	// ie下获取全局样式
	// console.log(boxDiv.currentStyle);

	// 其它浏览器获取全局样式(包含IE9+)
	// console.log(getComputedStyle(boxDiv, null));
	var r = getComputedStyle(boxDiv, null);
	console.log(r);
	console.log(r['border']);
	console.log(r['backgroundColor']);
	console.log(r.backgroundColor);

	// 获取伪元素的样式
	// 第一个参数: 元素
	// 第二个参数: 伪元素选择器
	// 第二个参数如果为null, 获取的是元素的全局样式
	console.log(getComputedStyle(boxDiv, '::after').fontSize);


	// 作业: 当天代码敲一遍



</script>